*{
    margin: 0;
    padding: 0;
}
@total-width:1080;
.w{
    width: (1050/40rem);
    margin: 0 auto;
}
html{
    font-size: (100vw/@total-width*40);
    background-color:#eff0f4;
}
a{
    text-decoration: none;
}
.banner,.nav,.bt{
    background-color: #fff;
}
.top-bar{
    height:(132/40rem);
    display: flex;
    justify-content:space-between;
    align-items: center;
    .menu{
        h2{
            margin-left: 10px;
        }
    }
    .menu-r{
        i{
            font-size: 18px;
            margin-left: 10px;
            margin-right: (42/40rem);
            color: #000;
        }
    }
}
.nav-bar{
    height:(140/40rem);
    display: flex;
    justify-content:space-around;
    align-items: center;
    .nav-l{
        a{
            
            color:#000;
            i{              
                font-size: (78/40rem);
            }
        }
    }
    .inp{
        position:relative;
        width: (778/40rem);
        height: (105/40rem);
        border-radius: 30px;
        font-size: (40/40rem);
        background-color: #bfb5ac;
        border: 1px solid #000;
        :nth-child(1){
            position:absolute;
            left:(47/40rem);
            top: (27/40rem);
            color: #000;
            font-size: (50/40rem);
        }
        :nth-child(3){
            position:absolute;
            right:(30/40rem);
            top: (23/40rem);
            color: #000;
            
        }
       .inp-z{
        width: (520/40rem);
        height: (105/40rem);
        border: none;
        box-sizing: border-box;
        position:absolute;
        left:(140/40rem);
        top: (0/40rem);
        font-size: (36/40rem);
        color: #201e1e;
       }

            i{
                font-size: (66/40rem);
            }
    }
    .nav-r{
        a{
            color: #000;
            i{
                margin-right: 10px;
                font-size: (78/40rem);
            }
        }
    }
}
.bt-bar{
    height: (104/40rem);
    line-height: (104/40rem);
    .items{
        height: (104/40rem);
        line-height: (104/40rem);
        display:flex;
        a{
            display:block;
            color:#707070;
            font-size: (46/40rem);
            text-align: center;
        }
        li{
            list-style: none;
            flex-grow: 1;
        }
        :nth-child(1){
            color: #000;
            font-size:(60/40rem);
        }
    }
}
.centerImg-bar{
    margin-top: (24/40rem);
    .centerImg{
        img{
            width: 100%;
        }
    }
}
.centerItem-bar{
    display:flex;
    justify-content: space-around;
    align-items: center;
    height:(256/40rem);
    margin-top: (18/40rem);
    background-color: #fff;
    border-radius: 10px;
    .Items{
        
        a{
            font-size: (36/40rem);
            color: #232323;
            text-align: center;
            img{
                width: 80%;
            } 
        }
       
    }
    
}

// hhh
.course-list{
    margin-top: (18/40rem);
    height:(364/40rem);width: (1049/40rem);
    clear: both;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    .course-bar{
        width: (518/40rem);
        height: (364/40rem);
        .title{
            display:flex;
            h2{
                font-size: (44/40rem);
                margin-top: (28/40rem);
                margin-bottom: (22/40rem);
                margin-left: (50/40rem);
                
            }
            i{
                font-size: (44/40rem);
                margin-top: (38/40rem);
                margin-left: (16/40rem);
                color: red;
            }
        }
        .item-list{
            position:relative;
            display:flex;
            .cover{
                margin-left:(46/40rem) ;
                img{
                    width:(205/40rem);
                    height: (254/40rem);
                }
            }
            .cover-x{
                margin-left:(26/40rem) ;
                img{
                    width:(206/40rem);
                    height: (171/40rem);
                
                }
            }
            .title-z{
                width: (152/40rem);
                height: (44/40rem);
                background-color: #ffebee;
                line-height:(44/40rem);
                border: 1px solid #ffebee;
                border-radius: (20/40rem);
                position:absolute;
                bottom: (30/40rem);
                right: (59/40rem);
                text-align: center;
                a{
                    font-size: (32/40rem);
                    color: #FF0133;
                }
            }

        }
    }
}
.courseqqq-list{
    
    height:(364/40rem);width: (1049/40rem);
    clear: both;
    background-color: #fff;
    display: flex;
    .course-bar{
        width: (518/40rem);
        height: (364/40rem);
        .title{
            display:flex;
            h2{
                font-size: (44/40rem);
                margin-top: (28/40rem);
                margin-bottom: (22/40rem);
                margin-left: (50/40rem);
                
            }
            i{
                margin-top: (38/40rem);
                margin-left: (16/40rem);
                color: red;
                font-size: (44/40rem);
            }
        }
        .item-list{
            position:relative;
            display:flex;
            .cover{
                margin-left:(46/40rem) ;
                img{
                    width:(205/40rem);
                    height: (254/40rem);
                }
            }
            .cover-x{
                margin-left:(26/40rem) ;
                img{
                    width:(206/40rem);
                    height: (171/40rem);
                
                }
            }
            .title-z{
                width: (152/40rem);
                height: (44/40rem);
                background-color: #ffebee;
                line-height:(44/40rem);
                border: 1px solid #ffebee;
                border-radius: (20/40rem);
                position:absolute;
                bottom: (30/40rem);
                right: (59/40rem);
                text-align: center;
                a{
                    font-size: (32/40rem);
                    color: #FF0133;
                }
            }

        }
       
    }
}
.wenzi{
    display: flex;
    height: (90/40rem);
    line-height: (90/40rem);
    border-radius: 0 0 10px 10px;
    background-color: #fff;
    margin-bottom: (40/40rem);
    h2{
        font-size: (54/40rem);
        margin-left:(64/40rem);
    }
    p{
        font-size: (38/40rem);
        margin-left:(64/40rem);
    }
}
// 
.zF-bar{
    display:flex;
    
    .z-foobar{
        width: (492/40rem);
        height: (750/40rem);
        border-radius:10px;
        margin-left: (26/40rem);
        border: 1px solid #BABABA;
        margin-bottom: (37/40rem);
        img{
            width: 100%;
        }
        .Img-title{
            margin-top:-5px;
            border-top:1px solid #BABABA;
            h3{
                margin-left: (27/40rem);
                margin-top: (30/40rem);
                margin-bottom: (10/40rem);
                font-size: (40/40rem);
            }
        }
        .keyword{
            display: flex;
            .keyword-l{
                margin-left: (27/40rem);
                margin-top: (25/40rem);
                width: (99/40rem);
                height: (40/40rem);
                border-radius:10px;
                border: 1px solid #BABABA;
                font-size: (26/40rem);
                line-height:(40/40rem);
                text-align: center;
            }
        }
        .user-info{
            display: flex;
            justify-content:space-around;
            margin-left: (20/40rem);
            margin-top: (20/40rem);
            font-size: (32/40rem);
            color: #BABABA;
            
            .poice{
                strong{
                    color: red;
                }
            }
        }
    }
    
}


// footer
.footer-bar{
    display:flex;
   
    height: (193/40rem);background-color:#fff;
    justify-content:space-around;
    align-items: center;
   .footer{
       a{
        i{
            font-size: (70/40rem);
            color:#818180;
        }
        p{
            color:#818180; 
          
        }
        &:hover{
            color:#ff6700;
        }
       }
        
   
   }
    
}